Day11 Custom HTML5 Video Player

Demo

第11天的實作目標是要做出一個客製化的網頁影像播放工具。

在Html5中本身就有video元素提供影音播放的功能。

但卻沒有附加控制元素，因為了控制video，需要自行建立控制video元素的功能。

因此接下來是實作控制元素功能。

1. 建立播放與暫停功能，和切換播放和暫停的圖示。

首先在播放鍵建立click事件，當click事件發生時，判斷video.paused的狀態，當paused=true時，代表現在video是暫停狀態，要video.play() 讓video播放，paused=false就是播放狀態要video.pause()來讓video暫停。

在控制播放的圖示也是透過video.paused來判斷目前的圖示，要呈現播放還是暫停的圖示。

// 控制播放狀態
video[video.paused ? 'play' : 'pause']();

// 控制播放icon
const icon = this.paused ? '開始' : '暫停'
toggleButton.textContent = icon

2. 前進和後退播放秒數

在第二個的功能打算做到點選特定按鈕時，可以讓video前進或是後退影格。

在兩個控制元素中的元素屬性中有data-skip="25"，data-skip=-10"，透過HTMLElement.dataset來取得中的數值為-10,25，因此利用HTMLElement.dataset取得數值來控制現在的video.currentTime播放時間。

video.currentTime +=parseInt(this.dataset.skip)

3. 建立控制播放速率和音量大小

第三個功能要做到控制播放影片的速率和音量大小。

video.playbackRate是取得video的播放速率或是控制速率，video.volume取得video的播放音量或控制音量。

由於控制速率和音量的元素為input[type=range]，要點選和拖移同時成立才發生事件。

ranges.forEach( range => range.addEventListener('click', changeRangeRate))
ranges.forEach( range => range.addEventListener('mousemove', changeRangeRate))

在速率跟音量是取得元素的name跟value來控制速率跟音量。

video[this.name] = this.value

4. 影片播放進度條和進度條點選功能

第四個功能是當影片播放時，會顯示目前播放的進度，類似於youtube的影片的下方紅色進度條，以及點擊進度條可以改變影片播放進度。

在這個部分為兩個功能，首先是進度條顯示功能，影片進度條的事件是透過timeupdate來觸發，即video的currentTime更新時就觸發，要知道目前播放的百分比，currentTime目前播放時間去與影片長度duration轉換成百分比，即可得到目前播放時間的百分比，接下來透過設定StyleflexBasis，就可以在currentTime更新時就改變進度條的長度。

const percent = (video.currentTime / video.duration) * 100
progressBar.style.flexBasis = `${percent}%`;

接下來是click事件觸發點選進度條，即可改變播放影片時間的功能，需取得滑鼠點選進度條位置e.offsetX和進度條總長度
progress.offsetWidth並將其轉換成百分比數值，把數值設為影片的現在播放時間video.currentTime，這樣就可以做到點選進度條即可改變播放目前影片的時間。

const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration
video.currentTime = scrubTime

以上四個功能完成後，其網頁即類似YOUTUBE的影片播放。

Html

<video class="player__video viewer" src="https://player.vimeo.com/external/194837908.sd.mp4?s=c350076905b78c67f74d7ee39fdb4fef01d12420&profile_id=164"></video>

影像元素

<div class="player__controls">
  <div class="progress">
    <div class="progress__filled"></div>
  </div>
  <button class="player__button toggle" title="Toggle Play">►</button>
  <input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1">
  <input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
  <button data-skip="-10" class="player__button">« 10s</button>
  <button data-skip="25" class="player__button">25s »</button>
</div>

影像的控制元素

JS

1. HTMLVideoElement
   在html中的影音元素包含video，audio，提供操作影音的物件，同時繼承HTMLMediaElement和HTMLElement的屬性和方法。
   The HTMLVideoElement interface provides special properties and methods for manipulating video objects. It also inherits properties and methods of HTMLMediaElement and HTMLElement.

2. HTMLMediaElement.play()
   影音元素的播放方法。

var Promise = HTMLMediaElement.play();

3. HTMLMediaElement.paused() 影音元素的暫停方法。

var isPaused = audioOrVideo.pause();

4. HTMLMediaElement.paused
   影音元素目前的播放狀態，回傳為布林值。
   The read-only HTMLMediaElement.paused property tells whether the media element is paused.

var obj = document.createElement('video');
console.log(obj.paused); // true

5. HTMLMediaElement.playbackRate
   影音元素的播放速率，預設值為1。

var dSpeed = video.playbackRate;
audio.playbackRate = 1.0;

6. HTMLMediaElement.volume
   影音元素的播放音量。

var volume = video.volume; //1

7. HTMLMediaElement.currentTime
   影音元素在目前的播放時間。

var cTime = video.currentTime;
video.currentTime = 35;

8. HTMLVideoElement.Events.timeupdate
   影音元素的事件會在元素的currentTime改變時被觸發。
   The timeupdate event is fired when the time indicated by the currentTime attribute has been updated.

Css

1. overflow[1]
   overflo是指當當內容比容器還大時，要如何呈現。
   • visible 內容物全部呈現出來，會超出容器。
   • hidden 容器以外的內容物被隱藏起來。
   • scroll 內容物會符合容器大小，當超過時會有滾動條。
   • auto 類似於scroll。

tags: video,